<template>
  <div class="register">
    <div class="register_title">
      <div class="register_title_img">
        <img src="../assets/images/sport.png" alt="LOGO" />
      </div>
      <div class="register_title_text"><span>port</span>运动</div>
    </div>

    <div class="register_welCome">欢迎注册 Sport 运动APP</div>

    <!-- 注册 -->
    <div class="register_form">
      <!-- 昵称 -->
      <div class="register_form_nickName">
        <!-- 图片 -->
        <div class="img">
          <img src="../assets/images/nickName.png" alt="昵称" />
        </div>
        <div class="ipt">
          <input type="text" placeholder="请输入您的昵称" />
        </div>
      </div>
      <!-- 账号 -->
      <div class="register_form_accout">
        <!-- 图片 -->
        <div class="img">
          <img src="../assets/images/accountNumber.png" alt="账号" />
        </div>
        <div class="ipt">
          <input type="text" placeholder="请输入您的账号" />
        </div>
      </div>
      <!-- 密码 -->
      <div class="register_form_password">
        <!-- 图片 -->
        <div class="img">
          <img src="../assets/images/pwd_purple.png" alt="密码" />
        </div>
        <div class="ipt">
          <input type="password" placeholder="请输入您的密码" />
        </div>
      </div>
      <!-- 密码 -->
      <div class="register_form_password">
        <!-- 图片 -->
        <div class="img">
          <img src="../assets/images/pwd_purple.png" alt="密码" />
        </div>
        <div class="ipt">
          <input type="password" placeholder="请确认您的密码" />
        </div>
      </div>
      <!-- 按钮 -->
      <div class="register_form_password_btn">注册</div>
      <!-- 已有账号？重新登录！ -->
      <div class="register_text">已有账号？前往登录！</div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.register {
  // background: yellow;
  width: 100vw;
  height: 100vh;
  color: #061439;
  padding: 5px 10px;

  .register_title {
    // background: gray;
    display: flex;
    justify-content: start;
    align-items: center;

    .register_title_img {
      img {
        width: 32px;
        vertical-align: bottom;
      }
    }

    .register_title_text {
      font-size: 32px;
      font-weight: 700;
      margin-left: -10px;

      span {
        font-weight: 500;
      }
    }
  }

  .register_welCome {
    width: 100%;
    height: 90px;
    // background: orange;
    font-weight: 700;
    font-size: 27px;
    font-style: italic;
    text-align: center;
    line-height: 90px;
  }

  .register_form {
    // background: gray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .register_form_password,
    .register_form_accout,
    .register_form_nickName {
      display: flex;
      justify-content: center;
      // background: red;
      margin: 20px 0 0 0;

      .img {
        height: 45px;
        margin: 0 10px 0 0;

        img {
          width: 40px;
          height: 40px;
          vertical-align: bottom;
        }
      }

      .ipt {
        // background: red;

        input {
          border: 1px dashed #061439;
          border-radius: 10px;
          width: 180px;
          height: 45px;
          padding: 0 0 0 10px;
          outline: none;

          &:focus {
            border: 3px solid #061439;
          }
        }
      }
    }
  }

  .register_form_password_btn {
    width: 90px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    // background: gray;
    border-radius: 20px;
    font-weight: 700;
    margin: 20px 0 0 0;
    position: relative;
    z-index: 0;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      inset: -30px;
      background: #061439;
      // color: transparent;
      background-image: conic-gradient(transparent, aqua, transparent 10%);
      animation: rotate 1s linear infinite;
      z-index: -5;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 5px;
      background: white;
      z-index: -3;
      border-radius: 20px;
    }
  }

  .register_text {
    font-size: 16px;
    border-bottom: 1px dashed #061439;
    padding: 5px 0;
    margin: 20px 0;
  }
}
</style>
